<template>
  <div class="dz">
    <p>
      <span>3D|电子</span>
      <van-icon name="arrow" class="ic"/>
    </p>
    <ul>
      <li v-for="(key,item) in name">
        <span><img :src=pic[item] alt=""></span>
        <br>
        <span class="text">
           {{text[item]}}
          </span>
        <p>{{name[item]}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "dianzi",
    data(){
      return{


        pic:[],
        name:[],
        text:[],
      }
    },
    created(){
      this.$http.get('http://localhost:3000/dj/recommend/type?type=10002')
        .then((res)=>{
          for(let i = 0; i < 3; i ++){
            this.pic.push(res.data.djRadios[i].picUrl);
            this.name.push(res.data.djRadios[i].name);
            this.text.push(res.data.djRadios[i].rcmdtext);

          }
        });

    }
  }
</script>

<style lang="scss">
  *{
    margin: 0px;
    padding: 0px;
  }
  .dz{

    box-sizing: border-box;
    padding:15px 15px 0 15px;
    p{
      box-sizing: border-box;
      padding-bottom: 40px;
      font-size: 50px;
      font-weight: bold;
      span{
        vertical-align: middle;
      }
      .ic{
        width: 27px;
        vertical-align: middle;
      }
    }
    ul{

      font-size: 0;

      li{
        width: 33.3333333%;
        letter-spacing: 0;
        list-style: none;
        position: relative;
        display: inline-block;
        font-size: 30px;
        padding-bottom: 60px;
        box-sizing: border-box;
        p{
          position: absolute;
          bottom: 145px;
          font-size: 30px;
          font-weight: unset;
          opacity: 0.9;
          text-indent: 15px;
          color: white;
        }
        span{
          display: inline-block;
        }
        .text{
          box-sizing: border-box;
          padding-left: 15px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          height: 95px;
          width: 340px;
          font-size: 35px;
        }
        img{
          width: 395px;
          height: 400px;
        }
      }
    }
  }
</style>
